<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #add{
            border: 1px solid;
        }
        #td,td,th{
            border: 1px solid;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="add">
            编号:
            <input type="text" v-model="code" @keydown.enter="add">
            品牌名称:
            <input type="text" v-model="name" @keydown.enter="add">
            <br>
            产品图片地址:
            <input type="text" v-model="imgSrc" @keydown.enter="add">
            价格:
            <input type="text" v-model="price" @keydown.enter="add">
            <button @click="add">点击添加</button>
        </div>
        <div id="td">
            <table>
                <tr>
                    <th>
                        全选:
                        <input type="checkbox" @change="allChange" :checked="allChecked">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>
                        <b>数量</b>
                    </th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in products" :key="item.id">
                    <td><input type="checkbox" v-model="checks" :value="item"></td>
                    <td><img :src="item.imgSrc" alt="" width="50px"></td>
                    <td>{{item.code}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button :disabled="item.num==1" @click="decrease(item)">-</button>
                        {{item.num}}
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>

            </table>
            <div id="aaa" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
        </div>
        <div id="bbb" style="width: 400px; height: 50px; border: 1px solid; text-align: right;">总价:{{total}}</div>

    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#box',

            data:{
                imgSrc:'',
                code:'',
                name:'',
                price:'',
                //获取内容
                checks:[],
                allChecked:false,
                products:[
                    {
                        id:1,
                        imgSrc:'https://img.72qq.com/file/202104/12/825b16e803.jpg',
                        code:'1222',
                        name:'章群大傻',
                        price:'5',
                        num:'4'
                    },
                    {
                        id:2,
                        imgSrc:'https://img0.baidu.com/it/u=4079267297,1293940030&fm=253&fmt=auto&app=138&f=JPEG?w=220&h=220',
                        code:'1111',
                        name:'张宇二傻',
                        price:'2',
                        num:'23'
                    }
                ]
            },
            methods: {
                del(index){
                    let target = this.products.splice(index,1)
                    this.checks= this.checks.filter(item => item.id !== target[0].id)
                    // console.log(target);
                    // console.log(this.checks);
                    // if (this.checks.length===0) {
                    //     this.allChecked=false
                    // }
                },
                add(){
                    if (!this.code||!this.name||!this.price) {
                        return
                    }

                    let obj = {
                        id: Math.random().toString(32).substring(2),
                        imgSrc:this.imgSrc?this.imgSrc:'https://img2.baidu.com/it/u=3199647631,3616697389&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
                        code:this.code,
                        name:this.name,
                        price:this.price,
                        num:'1'
                    }
                    this.products.push(obj)
                },
                increase(item){
                    item.num++
                },
                decrease(item){
                    item.num--
                },
                allChange(e){
                    console.log(e.target.checked);
                    if (e.target.checked) {
                        this.checks=this.products
                    }else{
                        this.checks=[]
                    }
                }
            },
            watch: {
                checks(newVal){
                    console.log(newVal);
                    if (newVal.length===this.products.length && newVal.length != 0) {
                        this.allChecked=true
                    }else{
                        this.allChecked=false
                    }
                }
            },
            computed: {
                total(){
                   return (this.checks.reduce(function(total,item){
                        return total+=item.price*item.num
                    },0)).toFixed(2)
                }
            }
        })


    </script>
</body>
</html>